<template>
    <card-box :articleId='articleId' :isAlreadySubmission='isAlreadySubmission' :index='index' :total='total'
        :currentQuestion='currentQuestion' @next='next' @restart='restart' @submit='submit'>
        <template v-slot:answer>
            <view class="answer-box">
                <view class="answer-item" :class="{'selected-item': index==answerIndex}"
                    v-for='(item, index) in selection' :key="index" @click='tapAnswer(item, index)'>
                    <view class="mark">
                        {{item.mark}}
                    </view>
                    <view class="detail">
                        {{item.details}}
                    </view>
                </view>
            </view>
            <card-result :isAlreadySubmission='isAlreadySubmission' :isCorrect='isCorrect'></card-result>
        </template>
    </card-box>
</template>

<script>
    import TestCardMixin from "../mixins/test-card-mixin.js";
    import CardBox from "./card-box.vue";
    import CardResult from "./card-result.vue"
    import {
        submitSingleChooseAnswer
    } from "../../../services/index.js"
    export default {
        components: {
            CardBox,
            CardResult
        },
        mixins: [TestCardMixin],
        data: function() {
            return {
                isAlreadySubmission: false,
                answerIndex: -1
            }
        },
        watch: {
            currentQuestion: {
                handler: function(n) {
                    if (n) {
                        this.isAlreadySubmission = false;
                        this.answerIndex = -1;
                        this.answer = null;
                    }
                },
                immediate: true
            }
        },
        computed: {
            selection: function() {
                return this.currentQuestion ? this.currentQuestion.selection : []
            },
            itemClass: function() {
                return ""
            }
        },
        methods: {
            tapAnswer: function(item, index) {
                if (index == this.answerIndex) {
                    this.answerIndex = -1;
                    this.answer = null;
                } else {
                    this.answerIndex = index;
                    this.answer = item;
                }
            },
            next: function() {
                this.$emit("next", {
                    finish: this.finish
                })
            },
            submit: function() {
                console.log("single-choose submit", this.answer)
                if (this.answer) {
                    uni.showLoading({
                        title: "提交中",
                    })
                    submitSingleChooseAnswer(this.articleId, this.answer.mark, this.currentQuestion.id).then(
                        res => {
                            this.score = res.score;
                            this.isCorrect = res.isCorrect;
                            this.isAlreadySubmission = true;
                        }).finally(() => {
                        uni.hideLoading()
                    })
                } else {
                    uni.showToast({
                        title: "请选择你的答案",
                        icon: 'none'
                    })
                }
            },
            restart: function() {
                this.score = 0;
                this.isCorrect = 0;
                this.isAlreadySubmission = false;
                this.answerIndex = -1;
                this.answer = null;
            }
        }
    }
</script>

<style lang="scss" scoped>
    .answer-box {
        display: flex;
        flex-direction: column;

        .answer-item {
            display: flex;
            flex-direction: row;
            margin-bottom: 30rpx;
            padding: 30rpx;
            background: #e8f4fd;
            color: #333;
            border: 3rpx solid #1893ed;
            border-radius: 8rpx;

            .mark {
                width: 100rpx;
                text-align: center;
                font-size: 40rpx;
                font-weight: 800;
                border-right: 8rx solid #333;
            }

            .detail {
                flex: 1;
                font-size: 40rpx;
            }
        }

        .answer-item:last-child {
            margin-bottom: 0;
        }

        .selected-item {
            background: #d2fddd;
            color: #333;
            border: 3rpx solid #31ed50;
        }
    }
</style>